<script setup>
import {getTemplateTypeEnum} from "@/utils/menu.js";

const {proxy} = getCurrentInstance()
const templateList = ref([])
const templateTotal = ref(0)
const templateDialogOpen = ref(false)
const templateDialogTitle = ref('')
const loading = ref(false)
const emits = defineEmits(['getTemplateList', 'handleSelectedTemplate', 'close'])
const templateTypeEnum = getTemplateTypeEnum()
const props = defineProps({
  isOpen: Boolean,
  templateType: String,
})
const data = reactive({
  queryParams: {
    name: '',
    pageNum: 1,
    pageSize: 10,
  }
})
const {queryParams} = toRefs(data)
watch(() => props.isOpen, (newValue) => {
  if (newValue) {
    loading.value = true
    templateDialogOpen.value = true
    resetCloneQuery()
  } else {
    templateDialogOpen.value = false
  }
})

const closeDialog = () => {
  emits('close')
}

/** 搜索按钮操作 */
function handleQuery() {
  getTemplateList()
}

/** 重置按钮操作 */
function resetCloneQuery() {
  proxy.resetForm("templateQueryRef")
  queryParams.value = {
    name: '',
    pageNum: 1,
    pageSize: 10,
  }
  getTemplateList()
}

function getTemplateList() {
  emits('getTemplateList', queryParams.value, (res) => {
    loadTemplateData(res)
  })
  function loadTemplateData(res) {
    loading.value = false
    templateList.value = res.list
    templateTotal.value = res.total
    templateDialogTitle.value = res.dialogTitle
  }
}

function selectedTemplate(template) {
  emits('handleSelectedTemplate', template)
}

</script>

<template>
  <!-- 选择模板对话框 -->
  <el-dialog :title="templateDialogTitle" v-model="templateDialogOpen" @close="closeDialog" width="1000px" append-to-body :close-on-click-modal="false">
    <el-row>
      <el-col :span="24" :xs="24">
        <el-form @submit.native.prevent :model="queryParams" ref="templateQueryRef" :inline="true" label-width="68px">
          <el-form-item label="模板名称" prop="name">
            <el-input
                v-model="queryParams.name"
                placeholder="请输入模板名称"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetCloneQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-table v-loading="loading" :data="templateList">
        <el-table-column label="模板名称" key="name" prop="name" :show-overflow-tooltip="true" >
          <template #default="scope">
            <span>{{ scope.row.data ? scope.row.data.name : scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" key="status" prop="status" width="100">
          <template #default="scope">
          <span>{{ scope.row.data ? scope.row.data.status : scope.row.status }}</span>
        </template>
        </el-table-column>
        <el-table-column label="固定格式" key="isFixedFormat" prop="isFixedFormat" width="100" v-if="templateType === templateTypeEnum.contract" >
          <template #default="scope">
            <span>{{ scope.row.data ? scope.row.data.isFixedFormat : scope.row.isFixedFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" fixed="right" width="80" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button type="success" plain @click="selectedTemplate(scope.row)" >确定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="templateTotal > 0"
          :total="templateTotal"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getTemplateList"
      />
    </el-row>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>